<template>
	<view class="contant" v-if="visible">
		<uni-popup ref="popup" :mask-click="false">
			<view class="content">
				<view style="text-align: end;padding: 20rpx;"><text @click="close">关闭</text></view>
				<uni-section title="用户" type="line" padding>
					<uni-easyinput suffixIcon="search" v-model="queryParams.nickName" placeholder="请输入用户名称"
						@iconClick="search()"></uni-easyinput>
				</uni-section>
				<up-down-load :callback="getList">
					<uni-table ref="table" type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
						<uni-tr>
							<uni-th width="150" align="center">姓名</uni-th>
							<uni-th width="150" align="center">账号</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in userList" :key="index">
							<uni-td align="center">{{ item.nickName }}</uni-td>
							<uni-td align="center">{{ item.userName }}</uni-td>
						</uni-tr>
					</uni-table>
				</up-down-load>
			</view>
			<view class="btn-contant">
				<view>
					<button @click="confirmUser" size="mini" type="primary">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		toast
	} from '@/utils/common'
	import {
		getWorkflowUserListByPage
	} from "@/api/workflow/workflowUser"
	import upDownLoad from '@/components/up-down-load/up-down-load.vue'
	export default {
		components: {
			upDownLoad
		},
		props: {
			//是否多选
			multiple: {
				type: Boolean,
				default: true,
			},
			//传入的条件
			dataObj: {
				type: Object,
				default: {}
			},
			// 节点id
			nodeId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				visible: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userName: undefined,
					nickName: undefined,
					deptId: undefined,
					type: undefined,
					params: undefined,
					paramIds: undefined,
					ids: []
				},
				// 总条数
				total: 0,
				// 用户表格数据
				userList: [],
				// 角色表格数据
				roleList: [],
				// 部门表格数据
				deptList: [],
				// 选中的人员
				chooseUserList: []
			}
		},
		watch: {
			visible(val) {
				if (val) {
					this.queryParams.params = this.dataObj.assigneeId
					this.queryParams.paramIds = this.dataObj.assigneeId
					this.queryParams.type = this.dataObj.chooseWay
					this.queryParams.ids = this.dataObj.ids
					this.$nextTick(function() {
						this.$refs.popup.open('bottom')
					})
				}
			},
		},
		methods: {
			/** 查询用户列表 */
			getList(mescroll) {
				this.mescroll = mescroll;
				getWorkflowUserListByPage(this.queryParams).then(response => {
					if (response.data) {
						let res = response.data.page
						//获取后端返回当前页码的数据
						let userList = res.rows;
						//存储后端返回的数据总数
						this.total = res.total;
						//如果当前是第一页则置空数据
						if (mescroll.num == 1) this.userList = [];
						//使用concat方法拼接数据
						this.userList = this.userList.concat(userList);
						//使用concat方法拼接数据
						//调用endBySize方法,当数据长度为总数的时候结束分页
						mescroll.endBySize(userList.length, this.total);
					}
				});
			},
			//打开
			open() {
				this.visible = true
				this.$nextTick(function() {
					this.$refs.popup.open('bottom')
				})
			},
			//关闭
			close() {
				this.queryParams.nickName = ''
				this.queryParams.pageNum = 1
				this.$refs.popup.close('bottom')
				let _this = this
				setTimeout(function() {
					_this.visible = false
				}, 500);
			},
			//检索
			search() {
				this.queryParams.pageNum = 1
				this.userList = []
				this.getList(this.mescroll)
			},
			// 多选
			selectionChange(e) {
				var indexArr = e.detail.index
				var arrlist = []
				// 把选中的当前行数据遍历放在数组中
				indexArr.forEach(item => {
					arrlist.push(this.userList[item])
				})
				var users = []
				arrlist.forEach((item) => {
					users.push(item)
				})
				this.chooseUserList = users
			},
			// 确认
			confirmUser() {
				if (this.chooseUserList && this.chooseUserList.length > 0) {
					this.$emit("confirmUser", this.chooseUserList, this.nodeId)
					this.close()
				} else {
					toast("请选择用户")
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		height: 70vh;
		background-color: #fff;
	}

	.btn-contant {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: flex-end;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
		padding: 10rpx;
		z-index: 100;
	}
	uni-button {
		width: 180rpx;
		height: 65rpx;
		line-height: 65rpx;
		font-size: 28rpx;
	}
</style>
